<template>
  <div>
    <section class="demo-text">
      <input type="file" @change="importf($event)" webkitdirectory />
      <filestree v-for="(item,index) in  worklist" :fileList="item" :key="'work'+index"></filestree>
      <json-ver @handleClick="handleClick" @testClick="testClick" :JsonList="obj"></json-ver> 
         <json-viewer :value="obj||{}" :expand-depth="5" copyables></json-viewer>  
         <div @dragover="dragover($event)" style="width:100px;height:100px;background:#e2e2e6" @drop="drop($event)">

           {{dragdata}}

         </div>
    </section>
    <p
      style="text-align:right;padding-right:60px;    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 9999;
    pointer-events: none;"
    >@王睿杰 2019.7.18</p>
  </div>
</template>
<script>
import filestree from "./filestree";
import jsonVer from "#/components/json-viwer/index.vue"
function createDir(name) {
  return {
    name: name,
    fileList: new Set(),
    dirlist: new Set()
  };
}
export default {
  components: { filestree,jsonVer },
  data() {
    return {
      fileList: undefined,
      worklist: [],
      dragdata:[],
      obj:{
        a:1,b:2,c:[
          {
            a:1,
            b:1
          },{
            a:1,
            b:1
          }
        ]
      }
    };
  },
  methods: {
    dragover(event){
     event.preventDefault();
        //  document.body.style.cursor='defalut'
        return;
    },
    drop(event){
      console.log(event);
      //  document.body.style.cursor='defalut'
     event.preventDefault();
        let name = event.dataTransfer.getData("name");
        this.dragdata.push(name);
    },
    handleClick(e){
      console.log(e)
    },
    testClick(e){
      console.log(e)
    },
    importf(event) {
      const target = event.target;
      const files = target.files;
      this.worklist.push(this.CreatefileSystem(files));
    },
    CreatefileSystem(files) {
      let fileSystem, leaf;
      for (let item of files) {
        let dirlist =
          item.webkitRelativePath && item.webkitRelativePath.split("/");
        dirlist.pop();
        for (let dir of dirlist) {
          if (!leaf) {
            leaf = fileSystem || createDir(dir);
          } else {
            leaf = this.testDir(dir, leaf);
          }
          if (!fileSystem) {
            fileSystem = leaf;
          }
        }
        leaf["fileList"].add(item.name);
        leaf[item.name] = item;
        leaf = null;
        item = null;
        dirlist = null;
      }
      return fileSystem;
    },
    testDir(dirname, leaf) {
      if (!leaf[dirname]) {
        leaf["dirlist"].add(dirname);
        leaf[dirname] = createDir(dirname);
      }
      return leaf[dirname];
    }
  }
};
</script>
